<div *ngIf="usbconf else usbconfig">当前USB设备管控模式为”可读可写“，无限制记录</div>
<ng-template #usbconfig>
    <ng-container card-body-head>
        <div class="body-head row mb-3">
            <div class="type-filter">
                <mat-select class="form-control selected" [ngModel]="activeAreaID" (ngModelChange)="onActiveAreaID($event)">
                    <mat-option [value]="0">全部区域</mat-option>
                    <ng-container *ngIf="areaList$ | async as areaList">
                        <mat-option *ngFor="let area of areaList.list" [value]="area.id">
                            {{ area.name }}</mat-option>
                    </ng-container>
                </mat-select>

                <div class="search">
                    <div class="search-input">
                        <input type="text" class="form-control" placeholder="请输入设备名称..." [ngModel]="searchKey" #keyword (keyup.enter)="onSearchKey(keyword.value, true)" (blur)="onSearchKey(keyword.value, false)" />
                    </div>
                    <div>
                        <button class="btn btn-light m-btn m-btn--icon m-btn--icon-only m-btn--pill" (click)="startSearch()">
              <i class="flaticon-search"></i>
            </button>
                    </div>
                    <m-button-icon class="ml-5" (click)="refresh()">刷新</m-button-icon>
                </div>
            </div>
        </div>
    </ng-container>

    <m-data-table *ngIf="result$ | async as result" [data]="result.list" [result]="result">
        <ng-container mDataTableColumn header="设备名称">
            <ng-template let-name="name">
                <td>{{ name }}</td>
            </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="终端别名">
            <ng-template let-pc_name="pc_name">
                <td>{{ pc_name }}</td>
            </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="人员姓名">
            <ng-template let-user_name="user_name">
                <td>{{ user_name }}</td>
            </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="VendorID">
            <ng-template let-vendor_id="vendor_id">
                <td>{{ vendor_id }}</td>
            </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="ProductID">
            <ng-template let-product_id="product_id">
                <td>{{ product_id }}</td>
            </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="SerialNumber">
            <ng-template let-serial_number="serial_number">
                <td class="serial-number" [attr.alt]="serial_number" [attr.title]="serial_number">{{ serial_number }}</td>
            </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="插入时间">
            <ng-template let-inserted_at="inserted_at">
                <td>{{ inserted_at | date:'yyyy-MM-dd HH:mm' }}</td>
            </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="操作">
            <ng-template let-id="id" let-name="name" let-record let-area_id="area_id" let-in_whitelist="in_whitelist" let-is_authorized="is_authorized">
                <td>
                    <button mat-icon-button [matMenuTriggerFor]="editMenu">
            <mat-icon>edit</mat-icon>
          </button>
                    <mat-menu #editMenu>
                        <button mat-menu-item *ngIf="!in_whitelist" (click)="addWhitelist(record)">添加白名单</button>
                        <button mat-menu-item *ngIf="in_whitelist && !is_authorized" (click)="addAuthorization(record)">添加终端权限</button>
                        <button mat-menu-item *ngIf="in_whitelist && is_authorized" (click)="addAuthorization(record)">移除终端权限</button>

                    </mat-menu>
                </td>
            </ng-template>
        </ng-container>

        <m-pagination [length]="result.total" [pageSize]="result.pageSize">可将设备先插入到终端，然后在限制记录中添加到白名单。
        </m-pagination>
    </m-data-table>
</ng-template>